<template>
  <footer>
    <ul class="nav-list">
      <li class="nav-item" v-for="(nav,index) in navList" :key="index">
        <span :style="{'background-position':ps(index)}"></span>{{ nav }}
      </li>
    </ul>
    <div class="toggle" @click="toggle"><span class="iconfont" :class="toggleClass"></span>{{ txt }}</div>
  </footer>
</template>
<script type="text/ecmascript-6">
    export default {
      data(){
        return{
          "navList":["机票","酒店","公寓"],
          flag:0,
          txt:'更多',
          toggleClass:'iconshuangjiantouxia'
        }
      },
      methods:{
        ps(index){
          return -(index<7?index:index-7) * 25 +'px '+ (index>6?-25:0)+'px'
        },
        toggle(){
          if(this.flag == 1){
            this.navList = ["机票","酒店","公寓"];
            this.flag = 0;
            this.txt = '更多';
            this.toggleClass = 'iconshuangjiantouxia'
          }else{
            this.navList = ["机票","酒店","公寓","团购","火车票","景点","接送机","度假","攻略","旅图","车车","当地人"]
            this.flag = 1;
            this.txt = '收起';
            this.toggleClass = 'iconshuangjiantoushang'
          }
        }
      }
    }
</script>
<style lang="stylus" rel="text/stylus" scoped>
  footer
    color:#9e9e9e
    font-size: .24rem
    position: relative
    overflow: hidden
    .nav-list
      width:6.4rem
      margin: 0 auto
      overflow: hidden
      padding:10px 10px 0
      .nav-item
        width: 25%
        float: left
        padding-left:.2rem
        height: .44rem
        line-height: .44rem
        span
          width:.44rem
          height:.44rem
          display: inline-block
          background-image: url(../../../assets/img/footer.png)
          background-repeat: no-repeat
          background-size:3.5rem 1rem

    .toggle
      position: absolute
      bottom:0
      right:0
</style>
